<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空域管理驱动力可视化平台</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <!-- 标题区域 -->
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">空域管理驱动力可视化平台</h1>
            <p class="text-gray-600">探索五大核心驱动力如何塑造全球空域管理模式</p>
        </header>

        <!-- 主要内容区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <!-- 流程图区域 -->
            <div class="lg:col-span-3">
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h2 class="text-xl font-semibold mb-4">核心驱动力关系图</h2>
                    <div id="flowchart" class="w-full h-96 lg:h-screen max-h-screen"></div>
                </div>
            </div>

            <!-- 控制面板 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-lg shadow-lg p-6 mb-4">
                    <h3 class="text-lg font-semibold mb-4">路径模拟器</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">地理约束</label>
                            <select id="geo-select" class="w-full p-2 border rounded">
                                <option value="">选择类型</option>
                                <option value="B1">地广人稀型</option>
                                <option value="B2">城市密集型</option>
                                <option value="B3">主权敏感型</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">制度基因</label>
                            <select id="system-select" class="w-full p-2 border rounded">
                                <option value="">选择类型</option>
                                <option value="C1">联邦制</option>
                                <option value="C2">单一制</option>
                                <option value="C3">联盟制</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">产业战略</label>
                            <select id="industry-select" class="w-full p-2 border rounded">
                                <option value="">选择类型</option>
                                <option value="D1">技术领先国</option>
                                <option value="D2">制造强国</option>
                                <option value="D3">后发国家</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">文化观念</label>
                            <select id="culture-select" class="w-full p-2 border rounded">
                                <option value="">选择类型</option>
                                <option value="E1">风险偏好型</option>
                                <option value="E2">风险规避型</option>
                                <option value="E3">发展优先型</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">安全传统</label>
                            <select id="security-select" class="w-full p-2 border rounded">
                                <option value="">选择类型</option>
                                <option value="F1">空防需求强国</option>
                                <option value="F2">民航体系发达国家</option>
                            </select>
                        </div>
                        <button onclick="simulatePath()" class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
                            模拟路径
                        </button>
                    </div>
                </div>

                <!-- 详情卡片 -->
                <div id="detail-card" class="bg-white rounded-lg shadow-lg p-6 hidden">
                    <h3 class="text-lg font-semibold mb-4">详细信息</h3>
                    <div id="detail-content"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="data.js"></script>
    <script src="app.js"></script>
</body>
</html>
